<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Input 输入框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
.demo-presuffix{
	margin-left: 20px;
	width: 500px;
}
.no-mart > .ant-space-item{
	margin-left: 0;
}
</style>
<body>

<div id="app"><a-config-provider :locale="locale">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">基本用法。（实测发现，设置了lazy后，只有在失焦后，值才绑定）</p>
	<a-space direction="vertical">
		<a-input v-model:value="value1_1" placeholder="基本用法" allow-clear></a-input>
		<a-input v-model:value.lazy="value1_2" autofocus placeholder="Lazy usage"></a-input>
		<a-input v-model:value="value1_3" placeholder="失焦触发" allow-clear @blur="onBlur"></a-input>
		<a-input v-model:value="value1_4" placeholder="获焦触发" allow-clear @focus="onFocus"></a-input>
		<a-input v-model:value="value1_5" placeholder="enter触发" allow-clear @keyup.enter="onEnter"></a-input>
		<a-input v-model:value="value1_6" placeholder="enter触发2" allow-clear @press-Enter="onEnter2"></a-input>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">前缀和后缀</a-divider><!-- =============================================================== -->
	<p class="desc">在输入框上添加前缀或后缀图标。</p>
	<div class="demo-presuffix">
		<a-input v-model:value="value2_1" placeholder="Basic usage">
			<template #prefix>
				<user-outlined class="ant-icon"></user-outlined>
			</template>
			<template #suffix>
				<a-tooltip title="Extra information">
					<info-circle-outlined class="ant-icon" style="color: rgba(0, 0, 0, 0.45)"></info-circle-outlined>
				</a-tooltip>
			</template>
		</a-input>
		<br />
		<br />
		<a-input prefix="￥" suffix="RMB" />
	</div>
	
	<a-divider class="a-divi" orientation="left">搜索框 loading</a-divider><!-- =============================================================== -->
	<p class="desc">用于 onSearch 的时候展示 loading。</p>
	<a-space direction="vertical" style="width: 500px;">
		<a-input-search v-model:value="value3_1" placeholder="input search loading deault" loading></a-input-search>
		<a-input-search v-model:value="value3_2" placeholder="input search loading with enterButton" loading enter-button></a-input-search>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">输入框组合</a-divider><!-- =============================================================== -->
	<p class="desc">输入框的组合展现。 注意：使用 compact 模式时，不需要通过 Col 来控制宽度。</p>
	<a-space class="site-input-group-wrapper" direction="vertical" size="middle">
		<a-input-group size="large">
			<a-row :gutter="8">
				<a-col :span="5">
					<a-input v-model:value="value4_1"></a-input>
				</a-col>
				<a-col :span="8">
					<a-input v-model:value="value4_2"></a-input>
				</a-col>
			</a-row>
		</a-input-group>
		<a-input-group compact>
			<a-input v-model:value="value4_1" style="width: 20%"></a-input>
			<a-input v-model:value="value4_2" style="width: 30%"></a-input>
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_3">
				<a-select-option value="Zhejiang">Zhejiang</a-select-option>
				<a-select-option value="Jiangsu">Jiangsu</a-select-option>
			</a-select>
			<a-input v-model:value="value4_4" style="width: 50%"></a-input>
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_5">
				<a-select-option value="Option1">Option1</a-select-option>
				<a-select-option value="Option2">Option2</a-select-option>
			</a-select>
			<a-input v-model:value="value4_6" style="width: 50%"></a-input>
		</a-input-group>
		<a-input-group compact>
			<a-input v-model:value="value4_7" style="width: 50%"></a-input>
			<a-date-picker v-model:value="value4_8" style="width: 50%" />
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_9">
				<a-select-option value="Option1-1">Option1-1</a-select-option>
				<a-select-option value="Option1-2">Option1-2</a-select-option>
			</a-select>
			<a-select v-model:value="value4_10">
				<a-select-option value="Option2-1">Option2-1</a-select-option>
				<a-select-option value="Option2-2">Option2-2</a-select-option>
			</a-select>
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_11">
				<a-select-option value="1">Between</a-select-option>
				<a-select-option value="2">Except</a-select-option>
			</a-select>
			<a-input v-model:value="value4_12" style="width: 100px; text-align: center" placeholder="Minimum"></a-input>
			<a-input v-model:value="value4_13" class="site-input-split"
				style="width: 30px; border-left: 0; pointer-events: none" placeholder="~" disabled></a-input>
			<a-input v-model:value="value4_14" class="site-input-right" style="width: 100px; text-align: center" placeholder="Maximum"></a-input>
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_15">
				<a-select-option value="Sign Up">Sign Up</a-select-option>
				<a-select-option value="Sign In">Sign In</a-select-option>
			</a-select>
			<a-auto-complete v-model:value="value4_16" :options="[{ value: 'text 1' }, { value: 'text 2' }]"
				style="width: 200px" placeholder="Email"></a-auto-complete>
		</a-input-group>
		<a-input-group compact>
			<a-select v-model:value="value4_17" style="width: 30%">
				<a-select-option value="Home">Home</a-select-option>
				<a-select-option value="Company">Company</a-select-option>
			</a-select>
			<a-cascader v-model:value="value4_18" style="width: 70%" :options="options4" placeholder="Select Address"></a-cascader>
		</a-input-group>
		<a-input-group compact>
			<a-input v-model:value="value4_19" style="width: calc(100% - 200px)"></a-input>
			<a-button type="primary">Submit</a-button>
		</a-input-group>
		<a-input-group compact>
			<a-input v-model:value="value4_20" style="width: calc(100% - 200px)"></a-input>
			<a-tooltip title="copy git url">
				<a-button>
					<template #icon>
						<Copy-outlined class="ant-icon"></Copy-outlined>
					</template>
				</a-button>
			</a-tooltip>
		</a-input-group>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">输入时格式化展示</a-divider><!-- =============================================================== -->
	<p class="desc">结合 Tooltip 组件，实现一个数值输入框，方便内容超长时的全量展现。（官网上有更复杂的写法，这里自己写了个简单的）</p>
	<a-space direction="vertical">
		<a-tooltip :trigger="['focus']" placement="topLeft" overlay-class-name="numeric-input">
			<template v-if="value5_1" #title>
				<span class="numeric-input-title">
					{{ formatValue5 }}
				</span>
			</template>
			<a-input v-model:value="value5_1" placeholder="Input a number" :max-length="25" style="width: 120px" @blur="onBlur" @focus="onFocus"></a-input>
		</a-tooltip>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">密码框</a-divider><!-- =============================================================== -->
	<p class="desc">密码框。</p>
	<a-space direction="vertical" size="middle" style="width: 500px">
		<a-input-password v-model:value="value6_1" placeholder="input password"></a-input-password>
		<a-input-password v-model:value="value6_2" placeholder="input password">
			<template #iconRender="v">
				<span v-if="v"><eye-two-tone class="ant-icon"></eye-two-tone></span>
				<span v-else><eye-invisible-outlined class="ant-icon"></eye-invisible-outlined></span>
			</template>
		</a-input-password>
		<a-input-password v-model:value="value6_3" placeholder="input password" :visibility-toggle="false"></a-input-password>
		<a-space class="no-mart">
			<a-input-password v-model:value="value6_4" v-model:visible="visible6" placeholder="input password"></a-input-password>
			<a-button @click="visible6 = !visible6">{{ visible6 ? 'Hide' : 'Show' }}</a-button>
		</a-space>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">文本域</a-divider><!-- =============================================================== -->
	<p class="desc">用于多行输入。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-textarea v-model:value="value7_1" placeholder="Basic usage" :rows="4"></a-textarea>
		<a-textarea v-model:value="value7_2" :rows="4" placeholder="maxlength is 6" :maxlength="6"></a-textarea>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 Input 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input status="error" placeholder="Error"></a-input>
		<a-input status="warning" placeholder="Warning"></a-input>
		<a-input status="error" placeholder="Error with prefix">
			<template #prefix>
				<Clock-circle-outlined class="ant-icon"></Clock-circle-outlined>
			</template>
		</a-input>
		<a-input status="warning" placeholder="Warning with prefix">
			<template #prefix>
				<Clock-circle-outlined class="ant-icon"></Clock-circle-outlined>
			</template>
		</a-input>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">适应文本高度的文本域</a-divider><!-- =============================================================== -->
	<p class="desc">属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-textarea v-model:value="value9_1" placeholder="根据内容行自动调整高度" auto-size></a-textarea>
		<a-textarea v-model:value="value9_2" placeholder="根据最小和最大行数自动调整高度" :auto-size="{ minRows: 2, maxRows: 4 }"></a-textarea>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">搜索框</a-divider><!-- =============================================================== -->
	<p class="desc">带有搜索按钮的输入框。</p>
	<a-space direction="vertical">
		<a-input-search v-model:value="value10" placeholder="关键字" @search="onSearch" style="width: 200px"></a-input-search>
		<a-input-search v-model:value="value10" placeholder="关键字" @search="onSearch" enter-button></a-input-search>
		<a-input-search v-model:value="value10" placeholder="关键字" @search="onSearch" enter-button="Search" size="large"></a-input-search>
		<a-input-search v-model:value="value10" placeholder="关键字" @search="onSearch" size="large">
			<template #enterButton>
				<a-button type="primary">搜索</a-button>
			</template>
		</a-input-search>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">三种大小</a-divider><!-- =============================================================== -->
	<p class="desc">我们为 Input 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input v-model:value="value11" size="large" placeholder="large size"></a-input>
		<a-input v-model:value="value11" placeholder="default size"></a-input>
		<a-input v-model:value="value11" size="small" placeholder="small size"></a-input>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">前置/后置标签</a-divider><!-- =============================================================== -->
	<p class="desc">用于配置一些固定组合。</p>
	<a-space direction="vertical">
		<a-input v-model:value="value12_1" addonBefore="Http://" addonAfter=".com"></a-input>
		<a-input v-model:value="value12_2">
			<template #addonBefore>
				<a-select v-model:value="value12_3" style="width: 90px">
					<a-select-option value="Http://">Http://</a-select-option>
					<a-select-option value="Https://">Https://</a-select-option>
				</a-select>
			</template>
			<template #addonAfter>
				<a-select v-model:value="value12_4" style="width: 80px">
					<a-select-option value=".com">.com</a-select-option>
					<a-select-option value=".jp">.jp</a-select-option>
					<a-select-option value=".cn">.cn</a-select-option>
					<a-select-option value=".org">.org</a-select-option>
				</a-select>
			</template>
		</a-input>
		<a-input v-model:value="value12_5">
			<template #addonAfter>
				<setting-outlined class="ant-icon"></setting-outlined>
			</template>
		</a-input>
		<a-input v-model:value="value12_6">
			<template #addonBefore>
				<a-cascader placeholder="cascader" style="width: 150px"></a-cascader>
			</template>
		</a-input>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带移除图标</a-divider><!-- =============================================================== -->
	<p class="desc">带移除图标的输入框，点击图标删除所有内容。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input v-model:value="value13_1" placeholder="input with clear icon" allow-clear></a-input>
		<a-textarea v-model:value="value13_2" placeholder="textarea with clear icon" allow-clear></a-textarea>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带字数提示</a-divider><!-- =============================================================== -->
	<p class="desc">展示字数提示。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-input v-model:value="value14_1" show-count :maxlength="20"></a-input>
		<a-textarea v-model:value="value14_2" show-count :maxlength="100"></a-textarea>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">无边框</a-divider><!-- =============================================================== -->
	<p class="desc">没有边框。</p>
	<a-input v-model:value="value15_1" :bordered="false" placeholder="Borderless"></a-input>
	
	
</a-config-provider></div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		locale: localeValues,
		value1_1: '',
		value1_2: '',
		value1_3: '',
		value1_4: '',
		value1_5: '',
		value1_6: '',
		
		value2_1: '',
		
		value3_1: '',
		value3_2: '',
		
		options4: [
			{value: 'zhejiang',label: 'Zhejiang',
				children: [
					{value: 'hangzhou',label: 'Hangzhou',
						children: [
							{value: 'xihu',label: 'West Lake',},
						],
					},
				],
			},
			{value: 'jiangsu',label: 'Jiangsu',
				children: [
					{value: 'nanjing',label: 'Nanjing',
						children: [
							{value: 'zhonghuamen',label: 'Zhong Hua Men',},
						],
					},
				],
			},
		],
		value4_1: '0571',
		value4_2: '26888888',
		value4_3: 'Zhejiang',
		value4_4: 'Xihu District, Hangzhou',
		value4_5: 'Option1',
		value4_6: 'input content',
		value4_7: 'input content',
		value4_8: null,
		value4_9: 'Option1-1',
		value4_10: 'Option2-2',
		value4_11: '1',
		value4_12: '',
		value4_13: '',
		value4_14: '',
		value4_15: 'Sign Up',
		value4_16: '',
		value4_17: 'Home',
		value4_18: [],
		value4_19: 'https://surely.cool',
		value4_20: 'https://antdv.com',
		
		value5_1: '123',
		
		value6_1: '123456',
		value6_2: '123456',
		value6_3: '123456',
		value6_4: '123456',
		visible6: true,
		
		value9_1: '',
		value9_1: '',
		
		value10: '',
		
		value11: '',
		
		value12_1: 'mysite',
		value12_2: 'mysite',
		value12_3: 'Http://',
		value12_4: '.com',
		value12_5: 'mysite',
		value12_6: 'mysite',
		
		value13_1: '',
		value13_2: '',
		
		value14_1: '',
		value14_2: '',
		
		value15_1: '',
	}
},
computed:{
	formatValue5(){
		let val = Number(this.value5_1);
		let fmt = '0.00';
		
		if(val > 0 && val < 100){
			fmt = val / 10000
		}else if(val >= 100){
			fmt = (val / 10000).toFixed(2);
		}
		return fmt + ' 万';
	},
	
	
},
methods:{
	search(value, event){
		console.log(value);
		console.log(event);
	},
	
	onBlur(){
		console.log('onBlur：失焦了');
	},
	onFocus(){
		console.log('onFocus：获焦了');
	},
	onEnter(){
		console.log('onEnter：按Enter了');
	},
	onEnter2(){
		console.log('onEnter2：按Enter了');
	},
	
	onSearch(searchValue){
		console.log('use value', searchValue);
		console.log('or use this.value', this.value10);
	},
	
},
watch:{
	value1_1:function(value){
		console.log('value1_1 的值为：' +value);
	},
	value1_2:function(value){
		console.log('value1_2 的值为：' +value);
	},
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
